<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,minimum-scale=0.5" />
		<title>Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面 &laquo; 潜行者M </title>
		<link rel="stylesheet" type="text/css" media="screen" href="css//style.css" />
	<link rel="stylesheet" href="css/mobile.css" type="text/css" media="handheld and (max-width: 740px), screen and (max-width: 740px)">
	<link rel="pingback" href="http://www.itkaifa.com/xmlrpc.php" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<link rel="alternate" type="application/rss+xml" title="RSS 潜行者M" href="http://www.itkaifa.com/feed" />
	<link rel="alternate" type="application/rss+xml" title="RSS 潜行者M Comments" href="http://www.itkaifa.com/comments/feed" />
	<link rel="shortcut icon" href="http://www.itkaifa.com/wp-content/themes/qetro/favicon.ico" />

	<!--[if lt IE 9]>
	<script src="http://www.itkaifa.com/wp-content/themes/qetro/js/html5.js"></script>
	<![endif]-->

	<link rel="alternate" type="application/rss+xml" title="潜行者M &raquo; Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面 Comments Feed" href="http://www.itkaifa.com/post-1993.html/feed" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.itkaifa.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.itkaifa.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='Unicode 符号序号以及 HTML 实体字符表格' href='http://www.itkaifa.com/post-1989.html' />
<link rel='next' title='Emmet 常用的高级功能' href='http://www.itkaifa.com/post-1995.html' />
<link rel='canonical' href='http://www.itkaifa.com/post-1993.html' />
<link rel='shortlink' href='http://www.itkaifa.com/?p=1993' />
</head>
<body>
	<!-- header Start -->
	<header class="header fl">
		<div class="header-wrap c">
			<div  class="blog-header fl ofh">
				<div class="blog-title"><h1><a href="http://www.itkaifa.com">潜行者M</a></h1></div>
				<div class="blog-des"><h2>关注前端开发热爱简约设计。</h2></div>
			</div>
			<nav class="nav fl">
				<div class="menu-topnav-container"><ul id="menu-topnav" class="menu"><li id="menu-item-1964" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-1964"><a href="http://www.itkaifa.com/post-category/qianduan">前端相关</a></li>
<li id="menu-item-1966" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1966"><a href="http://www.yujiangshui.com">关于我</a></li>
</ul></div>			</nav>
		</div>
	</header>
	<!-- header End -->	<!-- body Start -->
	<div class="main-wrap clearfix c ">
		<div class="main fl ">
			<div class="location">
				<a href="http://www.itkaifa.com">首页</a> &gt; <a href="http://www.itkaifa.com/post-category/css" title="View all posts in CSS" rel="tag">CSS</a> , <a href="http://www.itkaifa.com/post-category/qianduan" title="View all posts in 前端相关" rel="tag">前端相关</a> &gt; <a href="http://www.itkaifa.com/post-1993.html">Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面</a>
			</div>
					<article id="entry-1993" class="entry ofh fl " class="post-1993 post type-post status-publish format-standard hentry category-css category-qianduan tag-bug">
				<header class="entry-title single">
					<h1 class="fb">Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面</h1>
				</header>
				<div class="entry-content" >
					<p><code>text-overflow:ellipsis</code> 属性通常用于隐藏超出长度的文本，并在文本最后面增加省略号。</p>
<p><a href="http://www.456bereastreet.com/archive/201305/firefox_and_the_magical_text-overflowellipsis_z-index/" target="_blank">456bereastreet</a> 发现：如果在网页的交互等过程中，出现一个新层（例如鼠标移动到下拉菜单，弹出下拉菜单内容），在 Firefox 下，文本内容当然会被新弹出内容遮住，但是省略号并不会。它会出现在新层的上面。</p>
<p>可以使用 Firefox 打开 <a href="http://www.456bereastreet.com/lab/text-overflow-ellipsis-firefox/" target="_blank">Demo </a>看一下具体效果。</p>
<p>如果你也遇到了这个问题，解决方法很简单，只需要为新弹出的覆盖层的 z-index 属性赋值为 <code>>1</code> 的数值即可，这样就可以解决了。你可以在上面的 Demo 中，使用 Firebug 增加一下。</p>
									</div>
				<div class="entry-meta">
					<p>本文由 潜行者m 写于 <time datetime="2013-06-26" >2013年06月26日</time> 放在了 <a href="http://www.itkaifa.com/post-category/css" title="View all posts in CSS" rel="tag">CSS</a>, <a href="http://www.itkaifa.com/post-category/qianduan" title="View all posts in 前端相关" rel="tag">前端相关</a> 分类下。贴上了  <a href="http://www.itkaifa.com/post-tag/bug" rel="tag">BUG</a> 标签。					</p>
				</div>
			</article>
						<aside class="entry-author fl">
				<p class="author-avatar fl"><img alt='' src='http://1.gravatar.com/avatar/bfa33a41a16c1a5443f971272ed3f2bf?s=100&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D100&amp;r=G' class='avatar avatar-100 photo' height='100' width='100' /></p>
				<p class="author-name fr"><a href="http://www.itkaifa.com/post-author/myljs" title="Posts by 潜行者m" rel="author">潜行者m</a> <a class="author-url" href="http://www.yujiangshui.com">http://www.yujiangshui.com</a> </p>
				<p class="author-description fr">独立博主，关注前端开发，热爱简约设计。喜欢 WordPress、Firefox、咖啡、后摇，我爱水煮鱼 的兼职作者。喜欢原创，鄙视抄袭者。</p>
				<p class="author-contact fr">联系 QQ：2422-0186-27 邮箱：itkaifa{@}126.com </p>
			</aside>
							<div id="comments" class="fl">
				<script type="text/javascript">
var duoshuoQuery = {"short_name":"qxzm","sso":{"login":"http:\/\/www.itkaifa.com\/wp-login.php?action=duoshuo_login","logout":"http:\/\/www.itkaifa.com\/wp-login.php?action=logout&_wpnonce=349007c27a"},"theme":"default","stylePatch":"wordpress\/Qetro"};
duoshuoQuery.sso.login += '&redirect_to=' + encodeURIComponent(window.location.href);
duoshuoQuery.sso.logout += '&redirect_to=' + encodeURIComponent(window.location.href);
(function() {
    var ds = document.createElement('script'); ds.type = 'text/javascript'; ds.async = true;
    ds.charset = 'UTF-8';
    ds.src = 'http://static.duoshuo.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script><a name="comments"></a>

<div class="ds-thread" data-thread-key="1993" data-author-key="1" data-title="Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面" data-url="http://www.itkaifa.com/post-1993.html"></div>

<script type="text/javascript">
	if (typeof DUOSHUO !== 'undefined')
		DUOSHUO.EmbedThread('.ds-thread');
</script>
	<div id="ds-ssr">

		
            <ol id="commentlist">
                		<li class="comment even thread-even depth-1" id="li-comment-1778">
			<article id="comment-1778" class="comment">
				<footer class="comment-meta">
					<cite class="comment-author vcard">
						<span class="fn"><a href='http://blog.jianso.com/' rel='external nofollow' class='url'>海蓝</a></span> on <a rel="nofollow" href="http://www.itkaifa.com/post-1993.html#comment-1778"><time pubdate datetime="2013-06-26T19:20:38+00:00">2013 年 6 月 26 日 at 19:20</time></a> <span class="says">said:</span>					</cite><!-- .comment-author .vcard -->
				</footer>
	
				<div class="comment-content"><p>完全不懂 不过 我正在学啦 希望早点能看懂 O(∩_∩)O~</p>
</div>
				
			</article><!-- #comment-## -->
		</li><!-- #comment-## -->
		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1876">
			<article id="comment-1876" class="comment">
				<footer class="comment-meta">
					<cite class="comment-author vcard">
						<span class="fn"><a href='http://t.qq.com/zhangyuhuan19880507' rel='external nofollow' class='url'>在下一只妞</a></span> on <a rel="nofollow" href="http://www.itkaifa.com/post-1993.html#comment-1876"><time pubdate datetime="2013-10-18T10:28:55+00:00">2013 年 10 月 18 日 at 10:28</time></a> <span class="says">said:</span>					</cite><!-- .comment-author .vcard -->
				</footer>
	
				<div class="comment-content"><p>以前遇到百思不得其解，今日得以拨云散雾 <img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_org.gif" /> </p>
</div>
				
			</article><!-- #comment-## -->
		</li><!-- #comment-## -->
            </ol>

		            
    </div>			</div>	
		</div> <!-- main -->
		<aside  class="sidebar fl lh150 ">	
		<ul>
			<li id="search-3" class="widget widget_search">			<form method="get" class="searchform" action="http://www.itkaifa.com/">
				<input value="搜一下又不会怀孕..." type="text" name="s" class="s" onblur="if (this.value =='') this.value='搜一下又不会怀孕...'" onfocus="this.value=''" onclick="if (this.value=='搜一下又不会怀孕...') this.value=''" />
				<input type="submit" class="sb" value="GO" />
			</form></li><li id="categories-3" class="widget widget_categories"><h2 class="sidebartitle">文章目录</h2>		<ul>
	<li class="cat-item cat-item-11"><a href="http://www.itkaifa.com/post-category/css" title="View all posts filed under CSS">CSS</a>
</li>
	<li class="cat-item cat-item-45"><a href="http://www.itkaifa.com/post-category/html" title="View all posts filed under HTML">HTML</a>
</li>
	<li class="cat-item cat-item-46"><a href="http://www.itkaifa.com/post-category/javascript-2" title="View all posts filed under JS/JQ">JS/JQ</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://www.itkaifa.com/post-category/zuopin" title="View all posts filed under 作品">作品</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://www.itkaifa.com/post-category/others" title="View all posts filed under 其他">其他</a>
</li>
	<li class="cat-item cat-item-6"><a href="http://www.itkaifa.com/post-category/qianduan" title="View all posts filed under 前端相关">前端相关</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://www.itkaifa.com/post-category/webdev" title="View all posts filed under 网站与后台开发">网站与后台开发</a>
</li>
		</ul>
</li>		<li id="recent-posts-3" class="widget widget_recent_entries">		<h2 class="sidebartitle">近期文章</h2>		<ul>
					<li>
				<a href="http://www.itkaifa.com/post-2003.html" title="本博将停止更新">本博将停止更新</a>
						</li>
					<li>
				<a href="http://www.itkaifa.com/post-2001.html" title="IE10 的一些前端有关的特性">IE10 的一些前端有关的特性</a>
						</li>
					<li>
				<a href="http://www.itkaifa.com/post-1995.html" title="Emmet 常用的高级功能">Emmet 常用的高级功能</a>
						</li>
					<li>
				<a href="http://www.itkaifa.com/post-1993.html" title="Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面">Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面</a>
						</li>
					<li>
				<a href="http://www.itkaifa.com/post-1989.html" title="Unicode 符号序号以及 HTML 实体字符表格">Unicode 符号序号以及 HTML 实体字符表格</a>
						</li>
				</ul>
		</li><li id="linkcat-38" class="widget widget_links"><h2 class="sidebartitle">网络好友</h2>
	<ul class='xoxo blogroll'>
<li><a href="http://binaryoung.com/" title="很有前途的小伙纸" target="_blank">Binaryoung</a>
很有前途的小伙纸</li>
<li><a href="http://peascloud.info/" title="很年轻的折腾狂" target="_blank">peascloud</a>
很年轻的折腾狂</li>
<li><a href="http://www.hiadmin.org/" title="专注于软件测试领域" target="_blank">Smart Testing</a>
专注于软件测试领域</li>
<li><a href="http://qianduanblog.com/" title="前端博客，同行" target="_blank">云淡然</a>
前端博客，同行</li>
<li><a href="http://geek100.com" title="前端同行" target="_blank">前端集合</a>
前端同行</li>
<li><a href="http://www.luckymoke.cn/" title="前端同行" target="_blank">吕侃的博客</a>
前端同行</li>
<li><a href="http://www.tinghaige.com" title="前端同行" target="_blank">听海阁</a>
前端同行</li>
<li><a href="http://www.qttc.net/" title="WEB开发，JS、PHP 大神" target="_blank">琼台博客</a>
WEB开发，JS、PHP 大神</li>
<li><a href="http://www.tanglangxia.com/" title="购物乱七八糟的分享" target="_blank">螳螂虾</a>
购物乱七八糟的分享</li>

	</ul>
</li>
<li id="linkcat-54" class="widget widget_links"><h2 class="sidebartitle">好站推荐</h2>
	<ul class='xoxo blogroll'>
<li><a href="http://blog.chloerei.com/" title="开发者，喜用 Ruby。writings.io 作者" target="_blank">Rei</a>
开发者，喜用 Ruby。writings.io 作者</li>
<li><a href="http://www.wpdaxue.com/" title="很不错的 WordPress 的教程" target="_blank">WordPress 大学</a>
很不错的 WordPress 的教程</li>
<li><a href="http://writings.io" title="纯纯的写作工具" target="_blank">Writings.io</a>
纯纯的写作工具</li>
<li><a href="http://www.zhangxinxu.com/wordpress/" title="前端超级大神" target="_blank">张鑫旭</a>
前端超级大神</li>
<li><a href="http://blog.wpjam.com/" title="WP超级大神" target="_blank">我爱水煮鱼</a>
WP超级大神</li>

	</ul>
</li>
		</ul>
		<ul class="sidebar-fo">
			<li id="categories-4" class="widget widget_categories "><h2 class="sidebartitle">分类目录</h2>		<ul>
	<li class="cat-item cat-item-11"><a href="http://www.itkaifa.com/post-category/css" title="View all posts filed under CSS">CSS</a>
</li>
	<li class="cat-item cat-item-45"><a href="http://www.itkaifa.com/post-category/html" title="View all posts filed under HTML">HTML</a>
</li>
	<li class="cat-item cat-item-46"><a href="http://www.itkaifa.com/post-category/javascript-2" title="View all posts filed under JS/JQ">JS/JQ</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://www.itkaifa.com/post-category/zuopin" title="View all posts filed under 作品">作品</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://www.itkaifa.com/post-category/others" title="View all posts filed under 其他">其他</a>
</li>
	<li class="cat-item cat-item-6"><a href="http://www.itkaifa.com/post-category/qianduan" title="View all posts filed under 前端相关">前端相关</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://www.itkaifa.com/post-category/webdev" title="View all posts filed under 网站与后台开发">网站与后台开发</a>
</li>
		</ul>
</li>		</ul
		
		</aside> <!-- sidebar -->	</div> <!-- mainwrap -->
		<footer class="footer ofh fl">
		<div class="footer-top"><div class="ftwrap c">			<div class="textwidget"><script type="text/javascript" src="http://js.tongji.linezing.com/2773162/tongji.js"></script><noscript><a href="http://www.linezing.com"><img src="http://img.tongji.linezing.com/2773162/tongji.gif"/></a></noscript></div>
		</div></div>
		<div class="footer-bottom"></div>
	</footer>
		<!-- Script
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="http://www.itkaifa.com/wp-content/themes/qetro/js/jquery-1.9.1.js"%3E%3C/script%3E'))</script>
	<script type="text/javascript" src="http://www.itkaifa.com/wp-content/themes/qetro/js/main.js"></script> -->
	<script type="text/javascript" src="http://www.itkaifa.com/wp-content/themes/qetro/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="http://www.itkaifa.com/wp-content/themes/qetro/js/main.js"></script></body>
</html>